<template>
    <div class="index">
        <div :class="ui.isCollapse?'header collapsed':'header'">
            <div class="logo"></div>
            <div class="toolbar">
                <div class="expendBtn" @click="ui.isCollapse=!ui.isCollapse">
                    <i class="fa fa-bars"></i>
                </div>
                <div class="filters"></div>
                <div class="actions">
                    <div class="item">
                        <i class="fa fa-user-circle-o"></i> {{userInfo.nickName}}
                    </div>
                    <div class="item">
                        <el-button type="text">
                            <i class="fa fa-key"></i> 修改密码
                        </el-button>                        
                    </div>
                    <div class="item">
                        <el-button type="text">
                            <i class="fa fa-power-off"></i> 退出系统
                        </el-button>                        
                    </div>
                </div>
            </div>
        </div>

        <div :class="ui.isCollapse?'menuPan collapsed':'menuPan'">
            <div class="logo">
                Quash
            </div>
            <div class="menus"> 
                <el-menu 
                    default-active="1-4-1" 
                    class="el-menu-vertical-demo"   
                    background-color="#3462fe"
                    text-color="#fafafa"
                    :collapse="ui.isCollapse" 
                    :router="true"
                >  
                    <template v-for="(item,ind) in menus" >
                        <el-submenu :index="item.c" v-if="item.cs && item.cs.length>0">
                            <template slot="title">
                                <i :class="item.i +' menuIcon'"></i><span slot="title">{{item.t}}</span>
                            </template>
                            <el-menu-item 
                                v-for = "(subItem , subIndex) in item.cs"
                                :data-r="subItem.c"
                                :key="subIndex"
                                :index="subItem.c"><i :class="subItem.i+' subIcon'"></i>{{subItem.t}}</el-menu-item>
                        </el-submenu>
                        <el-menu-item :index="item.c" v-else>
                            <i :class="item.i +' menuIcon'"></i><span slot="title">{{item.t}}</span>
                        </el-menu-item> 
                    </template>
                </el-menu>         
            </div>
        </div>

        <div :class="ui.isCollapse?'main collapsed':'main'"> 
           <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            var me = this;
            try{
                me.init();
            }
            catch(er){
                console.log(er)
            }
        },
        data() {
            return {
                userInfo: {},
                menus:[],
                ui:{
                    isCollapse: false
                }
            };
        },
        methods: {
            init() {
                var me = this;
                try{
                    var userInfo = me.getUserInfo();
                    if( userInfo==null){
                        me.$message.error('用户名或密码错误！');
                        me.$router.replace({
                            path:"admin"
                        })
                    }
                    else{
                        me.userInfo = userInfo;
                    }
                    me.menus = me.indexMenus;
                }
                catch(er){
                    console.log(er)
                }
            },
            getUserInfo() {
                var me = this;
                var res = null;
                try{
                    var userData = window.sessionStorage.getItem("squLogin");
                    if( userData && userData!=null && userData.length>0){
                        var userInfo = JSON.parse(userData);
                        res = userInfo;
                    }
                }
                catch(er){
                    console.log(er)
                }
                return res;
            },
        },
    }
</script>

<style lang="less" scoped>
    .index{
        height: 100%;
    }
    .header{
        position: fixed;
        width: 100%;
        display: flex;
        background-color: #fff;
        z-index: 990;
        .logo{
            width: 200px;
        } 
        .toolbar{
            flex: 1;
            display: flex;
            .expendBtn{
                i{
                    height: 40px;
                    width: 40px;
                    line-height: 40px;
                    text-align: center;
                    font-size: 1.2em;
                    font-weight: bold;
                }
            }
            .expendBtn:hover{
                cursor: pointer;
                background-color: #eee;
            }
            .actions{
                display: flex;
                align-items: center;
                padding: 0 15px;
                .item{
                    padding: 0 10px;
                }
            }
            .filters{
                flex: 1;
            }
        }
    }
    .header.collapsed .logo{
        width: 64px;
    }

    .menuPan{
        z-index: 992;
        width: 200px;
        position: fixed;
        height: 100%;
        background-color: #3462fe;
        color: #fff;
        left: 0;
        top: 0;
        .logo{
            height: 40px;
            line-height: 40px;
            font-weight: bold;
            text-align: center;
            border-bottom: 1px solid #255cb6;
            background-color: #094eb6;
        }
        .subMenuItem{
            padding-right: 10px;
        }
    }
    .menuPan.collapsed{
        width: 64px;
    }

    .main{
        padding:0;
        padding-left: 200px;
        padding-top: 40px;
        height: 100%;
    }
    .main.collapsed {
        padding-left: 64px;
    }

    ::v-deep .el-menu{
        border-right:0
    }
    ::v-deep i.menuIcon{
        margin-right: 5px;
        width: 24px;
        text-align: center;
        font-size: 18px;
        vertical-align: middle;
        color: #fff;
    }
    ::v-deep .el-submenu__icon-arrow.el-icon-arrow-down{
        color: #fafafa;
    }
    i.subIcon{
        color: #fff;
        padding-right: 10px;
        font-size: 1.2em;
    }
    .r0 {
        margin-right: 5px;
        width: 24px;
        text-align: center;
        font-size: 18px;
        vertical-align: middle;
    }
</style>